<!DOCTYPE html>
<html lang='cn'>
	<head>
		<meta name='viewport' content='width=device-width,initial-scale=1 .0 user-scale' />
		<meta charset='utf-8' />
		<title>像素灯网页配置</title>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			body {
				background: rgb(255, 255, 255) url(img/index.jpg) center center;
				background-size: cover;
				position: relative;
				/* 相对位置 */
			}

			.container {
				position: absolute;
				/* 绝对位置 */
				top: 50%;
				text-align: center;
				width: 100%;
				transform: translateY(-50%);
				/* 将div元素上移至自身高度的50% */
			}

			h1 {
				line-height: 90px;
				color: royalblue;
				font-size: 50px;
			}

			p {
				line-height: 80px;
				color: royalblue;
				font-size: 22px;
			}

			.btn {
				width: 150px;
				height: 60px;
				background-color: #7cacae;
				color: #fff;
				font-size: 24px;
				line-height: 60px;
				margin: 10px auto;
				/* 设置其上下边距：30px 左右边距：自动 */
				border-radius: 10px;
				/* 给按钮增加圆角样式 */
				transition: 1s;
			}

			.btn:hover {
				background-color: royalblue;
				width: 300px;
				height: 100px;
				line-height: 100px;
				font-size: 36px;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<h1>欢迎使用像素灯</h1>
			<p>请选择要显示的内容</p>
			<form action='/pic' method='POST'><input class='btn' type='submit' value='图片'></form>
			<form action='/time' method='POST'><input class='btn' type='submit' value='时钟'></form>
			<form action='/words' method='POST'><input class='btn' type='submit' value='文字'></form>
			<form action='/animation' method='POST'><input class='btn' type='submit' value='动画'></form>
			<form action='/setting' method='POST'><input class='btn' type='submit' value='配置'></form>
		</div>
	</body>
</html>
